<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>线路搜索</title>
<#assign base=request.contextPath  />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
    <script type="text/javascript" src="${base}/js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
        #container {
            width: 100%;
            height: 100%
         }
        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
        button{
            border-radius: 5px;
        }
    </style>
</head>

<body>
<input type="hidden" value="${charegeLat}" id="charegeLat">
<input type="hidden" value="${charegeLng}" id="charegeLng">
<input type="hidden" value="${locationLat}" id="locationLat">
<input type="hidden" value="${locationLng}" id="locationLng">
<div id="panel">
  <#--  <b>起点: </b>
    <select id="start" onchange="search();">
        <option value="北京南站">北京南站</option>
        <option value="银科大厦">银科大厦</option>
        <option value="清华大学">清华大学</option>
    </select>
    <b>终点: </b>
    <select id="end" onchange="search();">
        <option value="王府井步行街">王府井步行街</option>
        <option value="天坛公园">天坛公园</option>
        <option value="地铁西单站">地铁西单站</option>
    </select>
    </select>-->
      <b>选择偏好：</b>
      <select id="policy" onchange="search();">
          <option value="LEAST_TIME">最少时间</option>
          <option value="LEAST_DISTANCE">最短距离</option>
          <option value="AVOID_HIGHWAYS">避开高速</option>
          <option value="REAL_TRAFFIC">实时路况</option>
          <option value="PREDICT_TRAFFIC">预测路况</option>
      </select>
</div>
<div id="container" style="height:90%"></div>
<div style='width: 500px; height: 180px' id="infoDiv"></div>
</div>
<script>
    var center = new qq.maps.LatLng($("#locationLat").val(),$("#locationLng").val());
    var map = new qq.maps.Map(document.getElementById("container"), {
        center: center
    });
    //设置获取驾车线路方案的服务
    var drivingService = new qq.maps.DrivingService({
        map: map,
        //展现结果
        panel: document.getElementById('infoDiv')

    });
    //设置搜索地点信息、驾车方案等属性
    function search() {
        var policy = document.getElementById("policy").value;
        //设置驾车方案
        drivingService.setPolicy(qq.maps.DrivingPolicy[policy]);
        //设置驾车的区域范围
        drivingService.setLocation("北京");
        //设置回调函数
        drivingService.setComplete(function(result) {
            if (result.type == qq.maps.ServiceResultType.MULTI_DESTINATION) {
                //alert("起终点不唯一");
                var d = result.detail;
                drivingService.search(d.start[0], d.end[0]);
            }

        });
        //设置检索失败回调函数
        drivingService.setError(function(data) {
            alert(data);
        });
        //设置驾驶路线的 终点
        var center2 = new qq.maps.LatLng($("#charegeLat").val(),$("#charegeLng").val());
        drivingService.search(center, center2);
    }
    window.onload = search;
</script>

</body>

</html>
